<template>
  <div class="nogood">
    <img src="../assets/noGood.png" alt="" />
    <div class="empty_rec">为你推荐</div>
    <div class="container">
      <div class="recolist">
        <van-grid class="recolist" column-num="2">
          <van-grid-item
            class="recoitem"
            v-for="item in recoList"
            :key="item.id"
          >
            <router-link :to="`/detail/${item.id}`">
              <div class="reco_img">
                <van-image :src="item.image" fit="contain" alt="" />
              </div>
              <div class="reco_name">{{ item.store_name }}</div>
              <div class="reco_price">¥{{ item.price }}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoGood",
  data() {
    return {
      recoList: null,
    };
  },
  created() {
    this.$axios.get("/api/products").then((d) => {
      if (d.data.status == 200) {
        this.recoList = d.data.data;
        console.log("recoList==>",this.recoList);
      }
    });
  },
};
</script>

<style lang="less">
.nogood {
  padding-top: 7rem;
  padding-bottom: 2rem;
  background: white;
  & > img {
    width: 13rem;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #b2b2b2;
    padding-bottom: 3.5rem;
  }
  .empty_rec {
    text-align: center;
    background-color: white;
    width: 6rem;
    margin: -0.7rem auto;
    border-left: 1px solid #b2b2b2;
    border-right: 1px solid #b2b2b2;
    font-size: 0.9rem;
  }
  .recolist {
    margin-top: 2rem;
    padding-bottom: 1.5rem;
    .recoitem {
      a {
        color: black;
      }
      .reco_img {
        .van-image {
          img {
            // width: 100%;
            height: 10rem;
          }
        }
      }

      .reco_name {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        margin-top: 0.3rem;
        width: 9rem;
        padding-left: 0.5rem;
      }
      .reco_price {
        color: #fc4141;
        margin-top: 0.15rem;
        padding-left: 0.5rem;
      }
    }
    .van-grid-item__content {
      padding: 0.3rem 0rem;
    }
  }
}
</style>